/**
 * Created by chenlin2 on 2017/11/17.
 */
define([
    './themes/lang/' + window.YUFP_SYS_CONFIG.language + '/pages/content/systemManager/xxlJob/jobIndex.js',
    './libs/daterangepicker/moment.min.js',
    './libs/daterangepicker/daterangepicker.js'
], function(require, exports) {
    // page加载完成后调用ready方法
    exports.ready = function(hashCode, data, cite) {
        // 统计
        yufp.service.request({
            method: 'GET',
            url: backend.jobService + '/api/xxljobindex/dashboardInfo',
            callback: function(code, message, response) {
                $('#jobInfoCount')[0].innerHTML = response.jobInfoCount;
                $('#jobLogCount')[0].innerHTML = response.jobLogCount;
                $('#executorCount')[0].innerHTML = response.executorCount;
            }
        });
        // 创建virtual model
        var _startDate = moment().subtract(1, 'months'); // 默认，最近一月
        var _endDate = moment();
        yufp.custom.vue({
            el: '#report_forms',
            data: function() {
                return {
                    value: [],
                    timepvisible: false,
                    height: yufp.frame.size().height,
                    width: yufp.frame.size().width * 0.6 - 50,
                    width2: yufp.frame.size().width * 0.4 - 50
                };
            },
            methods: {
                // 转换中国标准时间
                format: function(time, format) {
                    var t = new Date(time);
                    var tf = function(i) {
                        return (i < 10 ? '0' : '') + i;
                    };
                    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a) {
                        switch (a) {
                            case 'yyyy':
                                return tf(t.getFullYear());
                                break;
                            case 'MM':
                                return tf(t.getMonth() + 1);
                                break;
                            case 'mm':
                                return tf(t.getMinutes());
                                break;
                            case 'dd':
                                return tf(t.getDate());
                                break;
                            case 'HH':
                                return tf(t.getHours());
                                break;
                            case 'ss':
                                return tf(t.getSeconds());
                                break;
                        }
                    });
                },
                // 自定义区间时间刷新图表方法
                selectDateFn: function() {
                    if (this.value.length == 2) {
                        if (this.value[0] != null) {
                            this.freshChartDate(this.value[0], this.value[1]);
                        } else {
                            this.timepvisible = false;
                        }
                    }
                },
                // 刷新报表
                freshChartDate: function(startDate, endDate) {
                    this.timepvisible = false;
                    var vue = this;
                    if (startDate.format == undefined) {
                        var param = {
                            condition: JSON.stringify({
                                from: this.format(startDate, 'yyyy-MM-dd HH:mm:ss'),
                                to: this.format(endDate, 'yyyy-MM-dd HH:mm:ss')
                            })
                        };
                    } else {
                        var param = {
                            condition: JSON.stringify({
                                from: startDate.format('YYYY-MM-DD HH:mm:ss'),
                                to: endDate.format('YYYY-MM-DD HH:mm:ss')
                            })
                        };
                    }
                    yufp.service.request({
                        method: 'GET',
                        url: backend.jobService + '/api/xxljobindex/triggerchartdate',
                        data: param,
                        callback: function(code, message, response) {
                            var data = response;
                            if (response.code == 200) {
                                // 折线图
                                var option = {
                                    title: {
                                        text: vue.$t('jobIndex.rqfbt')
                                    },
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'cross',
                                            label: {
                                                backgroundColor: '#6a7985'
                                            }
                                        }
                                    },
                                    legend: {
                                        data: [vue.$t('jobIndex.cgddcs'), vue.$t('jobIndex.sbddcs')]
                                    },
                                    toolbox: {
                                        feature: {
                                            /* saveAsImage: {}*/
                                        }
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    xAxis: [{
                                        type: 'category',
                                        boundaryGap: false,
                                        data: data.content.triggerDayList
                                    }],
                                    yAxis: [{
                                        type: 'value'
                                    }],
                                    series: [{
                                            name: vue.$t('jobIndex.cgddcs'),
                                            type: 'line',
                                            label: {
                                                normal: {
                                                    show: true,
                                                    position: 'top'
                                                }
                                            },
                                            areaStyle: { normal: {} },
                                            data: data.content.triggerDayCountSucList
                                        },
                                        {
                                            name: vue.$t('jobIndex.sbddcs'),
                                            type: 'line',
                                            label: {
                                                normal: {
                                                    show: true,
                                                    position: 'top'
                                                }
                                            },
                                            areaStyle: { normal: {} },
                                            data: data.content.triggerDayCountFailList
                                        }
                                    ],
                                    color: ['#00A65A', '#F39C12']
                                };
                                var lineChart = echarts.init(document.getElementById('yu-rwzxchartBox1'));
                                lin.setOption(option);
                                // 饼图
                                var option = {
                                    title: {
                                        text: vue.$t('jobIndex.cgblt'),
                                        /* subtext: 'subtext',*/
                                        x: 'center'
                                    },
                                    tooltip: {
                                        trigger: 'item',
                                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left',
                                        data: [vue.$t('jobIndex.cgddcs'), vue.$t('jobIndex.sbddcs')]
                                    },
                                    series: [{
                                        name: vue.$t('jobIndex.fbbl'),
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: [{
                                                value: data.content.triggerCountSucTotal,
                                                name: vue.$t('jobIndex.cgddcs')
                                            },
                                            {
                                                value: data.content.triggerCountFailTotal,
                                                name: vue.$t('jobIndex.sbddcs')
                                            }
                                        ],
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }],
                                    color: ['#00A65A', '#F39C12']
                                };
                                var pieChart = echarts.init(document.getElementById('yu-rwzxchartBox2'));
                                pieChart.setOption(option);
                            } else {
                                vue.$message({ message: response.msg + vue.$t('jobIndex.ddbbsjjzyc'), type: 'warning' });
                            }
                        }
                    });
                }
            },
            mounted: function() {
                var vue = this;
                $('#timepopover li').click(function() {
                    $('li').removeClass('yu-rwzxLiactive');
                    $(this)[0].className = 'yu-rwzxLiactive';
                    if ($(this).text() == this.$t('jobIndex.jr')) {
                        _startDate = moment().startOf('day');
                        _endDate = moment().endOf('day');
                    } else if ($(this).text() == this.$t('jobIndex.zr')) {
                        _startDate = moment().subtract(1, 'days').startOf('day');
                        _endDate = moment().subtract(1, 'days').endOf('day');
                    } else if ($(this).text() == this.$t('jobIndex.by')) {
                        _startDate = moment().startOf('month');
                        _endDate = moment().endOf('month');
                    } else if ($(this).text() == this.$t('jobIndex.sgy')) {
                        _startDate = moment().subtract(1, 'months').startOf('month');
                        _endDate = moment().subtract(1, 'months').endOf('month');
                    } else if ($(this).text() == this.$t('jobIndex.zjyz')) {
                        _startDate = moment().subtract(1, 'weeks');
                        _endDate = moment();
                    } else if ($(this).text() == this.$t('jobIndex.zjyy')) {
                        _startDate = moment().subtract(1, 'months');
                        _endDate = moment();
                    }
                    vue.freshChartDate(_startDate, _endDate);
                });
                // 初始化图表
                this.freshChartDate(_startDate, _endDate);
            }
        });
    };
});